<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png" />
    <ul style="width: 20px; margin: 0 auto">
      <li v-for="item in userInfo" :key="item">{{ item }}</li>
    </ul>
    <el-button type="primary" @click="add">增加元素</el-button>
    <el-button type="primary" @click="change">改变元素</el-button>
    <el-button type="primary" @click="change2">set改变元素</el-button>
  </div>
</template>

<script>
// @ is an alias to /src
import MyCard from "@/components/MyCard.vue";

export default {
  name: "HomeView",
  data() {
    return {
      userInfo: [1, 2, 3, 4],
    };
  },
  components: {
    MyCard,
  },
  methods: {
    add() {
      this.userInfo.push(new Date() * 1);
    },
    change() {
      this.userInfo[0] = new Date() * 1;
    },
    change2() {
      this.$set(this.userInfo, 0, new Date() * 1);
    },
  },
};
</script>
<style scoped lang="postcss">
.home {
  max-width: 600px;
  text-align: center;
  margin: 0 auto;
}
</style>
